<template>
	<view class="container-aftesale">
	  <view class="bottom">
	    <view v-for="(item,index) in list" class="list-view" :key="index">
	      <view class="view-title">
			  <view v-if="item.order_type == 1">
	              预售售后[已审核通过]
	              {{item.name}}
			  </view>
			  <view v-else>增补售后[已审核通过]
			  </view>
			</view>
		<view class="data-bottom">
	
	        <view class="db-top" @click="tap($event,index)" :data-type="1" >
	          <view class="data-title">
	            <view>退款</view>
	          </view>
	          <view class="data-show">
	            <view>{{item.drawback_order}}</view>
	            <view>订单</view>
	          </view>
	          <view class="data-show">
	            <view>{{item.drawback_money}}</view>
	            <view>总金额</view>
	          </view>
	        </view>
	
	        <view class="db-bottom">
	          <view class="data-title">
	            <view>换货</view>
	          </view>
	          <view class="data-show">
	            <view>{{item.exchange_goods_num}}</view>
	            <view>订单</view>
	          </view>
	          <view class="data-show">
	            <view>{{item.exchange_goods_order}}</view>
	            <view>产品总数量</view>
	          </view>
	        </view>
	
	      </view>
	    </view>
	  </view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				list: [],
				query:{
				      detailsDate:{year:'2020',month:'0'},
				      preDate:{year:'2020'}
				    }
			}
		},
		onLoad (options) {
		    
		    //预售
		    this.getAfterSale(1)
		    //零售
		    this.getAfterSale(2)
		    this.changeNaviTitle()
		
		  },
		methods: {
			getAfterSale (type) {
			    
			    let schoolId = this.$store.getters.currentSchool.school_id
			
				this.$api.getSizeOrderRefund({
			        school_id: schoolId,
			        order_type: type,
					time_year:this.query.detailsDate.year,
					time_month:this.query.detailsDate.month
			      }).then((rep) => {
					  let {data} = rep.data
					  console.log(data)
					 
					  let array
					  if(type == 2){
						  array = [data]
					  }else{
						  array = data
					  }
					  
			        if (!this.list.length){
			            this.list = array
			        }else{
			          this.list = this.list.concat(array)
			          this.sortList(this.list)
			        }
			      })
			  },
			
			  sortList (ls) {
			   
			    for (let i = 0; i < ls.length - 1; i++) {
			      if (parseInt(ls[i].order_type) > parseInt(ls[i + 1].order_type) ){
			        var temp = ls[i];
			        ls[i] = ls[i + 1]
			        ls[i + 1] = temp
			      }
			    }
				this.list = ls;
			  },
			
			  changeNaviTitle () {
			    var schoolName = this.$store.getters.currentSchool.school_name
				uni.setNavigationBarTitle({
				  title:schoolName + '售后'
				})
			  },
			
			  tap (event,index) {
				const item = this.list[index]
				console.log(item)
			    const type = item.order_type
			    const refund_type = event.currentTarget.dataset.type
				const booking_id = item.booking_id
				    
				let year = this.query.preDate.year
				let month = 0
				if(type !== 1){
				  month = this.query.detailsDate.month
				  year = this.query.detailsDate.year
				}
			    uni.navigateTo({
			      url: '../list/list' + '?type=' + type + '&source=' + 1 +
				  '&refund_type=' + refund_type + 
				  '&booking_id=' + booking_id + 
				  '&year=' + year + 
				  '&month=' + month
			    })
			  },			  
		}
	}
</script>

<style lang="scss">
page{
  height: 100%;
}

.container-aftesale{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.list-view{
  margin-left: 10rpx;
  margin-right: 10rpx;
  background-color: #F5F5F5;
  border: 1px solid #ddd;
  padding-bottom: 24rpx;
  margin-top: 24rpx;
}

.list-view:nth-child(1){
  margin-top: 0rpx;
}

.bottom{
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  width: 100%;
}

.data-title{
  width: 20%;
  display: flex;
  justify-content: center;
  align-self: center;
  font-size: 14px;
}

.data-title > view{
  height: 100%;
}

.data-bottom{
  display: flex;
  flex-direction: column;
}
.view-title{
  margin-top: 10rpx;
  padding-bottom: 10rpx;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
}
.view-title > view{
  margin-left: 20rpx;
}
.data-show{
  width: 40%;
  display: inline-block;
  text-align: center;
  align-self: center;
  font-size: 13px;
}
.data-show > view:nth-child(1){
  font-size: 30px;
}
.db-bottom, .db-top{
  display: flex;
  margin-top: 40rpx;
}
.db-bottom{
  border-top: 1px solid #ddd;
  padding-top: 26rpx;
  padding-bottom: 26rpx;
}
</style>
